<template>
    <div class="form-container" style="margin:0 0 12px 0" >
      <el-card>
     <el-row :gutter="12" class="search-row"> 
   <el-form :inline="true" :model="formInline" ref="formRef"  label-position="right" class="demo-form-inline flex flex-wrap gap-4">
    <el-form-item label="工作单编号:" prop="workOrderCode" class="form-item" >
        <el-input v-model="formInline.workCode" placeholder="工作单编号"/>
      </el-form-item>
      <el-form-item label="来电号码:" prop="callNum" class="form-item">
      <el-input v-model="formInline.incomingNum" placeholder="请输入"   />
    </el-form-item>
    <el-form-item label="业务类型:" prop="businessType" class="form-item">
      <el-select v-model="formInline.businessType" placeholder="请选择业务类型"   >
          <el-option  v-for="item in createTypeoption" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
    </el-form-item>
    <el-form-item label="诉求时间:" prop="appealTime" class="form-item">
        <el-date-picker
        v-model="formInline.appealTime"
        type="datetimerange"
        format="YYYY-MM-DD "
        date-format="YYYY/MM/DD "
      />
    </el-form-item>
    <el-form-item  class="form-item"  >
      <!-- <div class="flex justify-end gap-2"> -->
        <el-button   type="primary" @click="onsubmint">查 询</el-button>
        <el-button    @click="reset">重置</el-button>
    <!-- </div> -->
    </el-form-item>
  </el-form>
  </el-row>  
<!-- </div> -->
</el-card>
</div>

    <!-- <el-row :gutter="12" class="search-row">
      <el-col :span="3">
        <el-input v-model="workOrderCode" placeholder="工作单编号"/>
      </el-col>
      <el-col :span="3">
        <el-input v-model="callNum" placeholder="来电号码"/>
      </el-col>
      <el-col :span="3">
        <el-input v-model="businessType" placeholder="业务类型"/>
      </el-col>
      <el-col :span="3">
        <el-input v-model="appealTime" placeholder="诉求时间"/>
      </el-col>
      <el-col :span="3">
        <el-button type="primary" @click="onsubmint">查 询</el-button>
      </el-col>
      <el-col :span="9" class="right-buttons">
        <el-button type="primary" @click="onImportExcelClick">导入数据</el-button>
        <el-button type="primary" @click="removeyearClick">按年份删除</el-button>
        <el-button type="primary" @click="removeallClick">删除全部</el-button>
        <el-button type="primary" @click="createlabelClick">诉求标签生成</el-button>
        <el-button type="primary" @click="createsummaryClick">生成摘要</el-button>
      </el-col>
    </el-row> -->
    <el-card>
    <div class="table_heard" style="display: flex;justify-content: space-between;"> 
      <div class="heard_left" style="display: inline-block;">
      <span>数据明细</span>
    </div> 
   <div class="heard_right" style="display: flex;justify-content: flex-end;">
    <el-button type="primary" @click="onImportExcelClick">导入数据</el-button>
        <el-button type="primary" @click="removeyearClick">按年份删除</el-button>
        <el-button type="primary" @click="removeallClick">删除全部</el-button>
        <el-button type="primary" @click="createlabelClick">诉求标签生成</el-button>
        <el-button type="primary" @click="createsummaryClick">生成摘要</el-button>
    </div>
</div>
    <div v-loading="tableLoading">
    <el-table :data="tableData"
              border
              v-loading="dataLoading"
              style="width: 100%;margin-bottom: 20px;margin-top: 20px;height: 60vh"
              @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="55" fixed="left"/>
      <el-table-column prop="workCode" label="工作单编号" width="190">
      </el-table-column>
      <el-table-column prop="userAddr" label="用户地址" min-width="160px" show-overflow-tooltip>
        <!-- <template v-slot="scope">
          {{ truncateString(scope.row.userAddr)  }}
        </template> -->
      </el-table-column>
      <el-table-column prop="callContent" label="来电内容" min-width="100px" show-overflow-tooltip>
        <!-- <template v-slot="scope">
          {{ truncateString(scope.row.callContent)  }}
        </template> -->
      </el-table-column>
      <el-table-column prop="incomingNum"  label="来电号码" min-width="120px" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="applicant"  label="诉求人" min-width="90px" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="businessType" label="业务类型" min-width="100px" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="businessSubclass"  label="业务子类" min-width="160px" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="appealTime"  label="诉求时间" min-width="100px" show-overflow-tooltip>
        <!-- <template v-slot="scope">
          {{ $filters.dateFilter(scope.row.appealTime)  }}
        </template> -->
      </el-table-column>
      <el-table-column prop="handlingSuggestions" label="处理意见" min-width="90px" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="opinionsMunicipalUpgrading" label="市提级意见" min-width="100px" show-overflow-tooltip>
        <!-- <template v-slot="scope">
          {{ truncateString(scope.row.opinionsMunicipalUpgrading)  }}
        </template> -->
      </el-table-column>
      <el-table-column prop="currentStage"  label="当前环节" min-width="100px" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="processingStatus"  label="处理状态" min-width="100px" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="numberReplies"  label="工单回复次数" min-width="110px" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="serviceChannels"  label="服务渠道" min-width="100px" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="informationSources"  label="信息来源" min-width="120px" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="powerStation"  label="供电所" min-width="90px" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="powerUnit"  label="供电单位" min-width="100px" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="powerBureau"  label="供电局" min-width="90px" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="replyMessage"  label="回复信息" min-width="100px" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="userId"  label="用户编号" min-width="100px" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="userName"  label="用户名称" min-width="100px" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="electricityCategory"  label="用电类别" min-width="100px" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="lineName"  label="线路名称" min-width="100px" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="towerAreaName"  label="台区名称" min-width="100px" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="archiveTime"  label="归档时间" min-width="100px" show-overflow-tooltip>
        <template v-slot="scope">
          {{ $filters.dateFilter(scope.row.recordTime)  }}
        </template>
      </el-table-column>
      <el-table-column prop="businessTags"  label="业务标签" min-width="100px" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="evaluationContent"  label="评议内容" min-width="100px" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="isTracking"  label="是否申请后续跟踪" min-width="140px" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="labelName"  label="标签名称" min-width="100px" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="labelCreateType"  label="标签创建类型" min-width="140px" show-overflow-tooltip>  
      </el-table-column>
      <el-table-column prop="businessContactPhone"  label="业务联系手机" min-width="130px">
      </el-table-column>
      <el-table-column prop="appealContent"  label="摘要内容" min-width="130px"  show-overflow-tooltip>
      </el-table-column>
      <el-table-column  label="操作" width="90px" fixed="right">
        <template #default="{ row }">
           <span style="color: #137eb2;cursor: pointer;"  @click="querydeta(row)">
            查询详情
           </span>
          </template>
         
      </el-table-column>
    </el-table>
    </div>
    <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-size="size"
        layout="total, prev, pager, next, jumper"
        :total="total"
    />
  </el-card>
  <el-dialog v-model="UploadExcelDialogShow" title="上传数据" width="20%">
    <el-upload
        class="upload-demo"
        multiple
        method="post"
        :action="uploadAction"
        style="margin-left: 10px"
        accept=".xlsx,.xls"
        :show-file-list="false"
        :on-success="handleSuccess"
        :before-upload="beforeUploadHandle"
        name="files"
    >
      <el-button style="margin-left: 100px;" type="primary" :loading="importLoading">导入</el-button>
    </el-upload>
  </el-dialog>
  <el-dialog v-model="DeletenoticeChooseYear" title="请选择需要删除的年份" width="40%">
    <div class="block" style="margin:30px">
        <el-date-picker
          v-model="ChooseYear"
          type="year"
          placeholder="请选择年份"
        />
      </div>
      <template #footer>
    <div class="dialog-footer" >
        <el-button @click="DeletenoticeChooseYear = false">取消</el-button>
        <el-button type="primary" @click="ConfirmremoveallChooseYear">
          确认
        </el-button>
    </div></template></el-dialog>
  <el-dialog v-model="Deletenotice" title="提示" width=40%>
    是否要删除全部？
     <template #footer>
    <div class="dialog-footer" >
        <el-button @click="Deletenotice = false">取消</el-button>
        <el-button type="primary" @click="ConfirmremoveallClick">
          确认
        </el-button>
      </div>
    </template></el-dialog>
    <DialogPage ref="childRef" :propData="parentData" @confirm="handleConfirm"></dialogpage>
   
</template>
<script setup>
import { ref ,computed,reactive} from 'vue'
import DialogPage from './component/dialogpage.vue'
import { ElMessage } from 'element-plus'
import { ElTable } from 'element-plus'
import utils from '@/utils/utils' 
import {getAllyear,getYMD} from '@/utils/timeUtil.js' 
import {getAll,deleteByDatewx,deleteByDate,deleteAllwx,deleteAll,updateWorkTag,updateSummary} from "@/api/work-order";

const workOrderCode = ref('')
const callNum = ref('')
const businessType = ref('')
const appealTime = ref('')
const UploadExcelDialogShow = ref(false)
const tableData = ref([])
const dataLoading = ref(false)
const total = ref(0)
const page = ref(1)
const size = ref(10)
const childRef=ref(null)
const Deletenotice=ref(false)
const propData=reactive()
const DeletenoticeChooseYear=ref(false)
const ChooseYear=ref("")
const apiBaseUrl=import.meta.env.VITE_API_URL
const uploadAction = computed(() => `${apiBaseUrl}/import/workOrder`);
const Selection=ref('')
const tableLoading = ref(false)
const importLoading = ref(false)
const formInline = reactive({
  workCode: '',
  incomingNum: '',
  businessType:'',
  appealTime:''
})

// 定义业务类型选项
const createTypeoption = ref([
  { value: '业务办理', label: '业务办理' },
  { value: '咨询查询', label: '咨询查询' },
  { value: '意见', label: '意见' },
  { value: '投诉', label: '投诉' },
  { value: '举报', label: '举报' },
  { value: '建议', label: '建议' },
  { value: '故障报修', label: '故障报修' },
  { value: '表扬', label: '表扬' }
]);

const truncateString = (str, maxLength = 10) => {
  if (str.length > maxLength) {
    return str.substring(0, maxLength) + '...';
  }
  return str;
}
const removeyearClick=()=>{
  DeletenoticeChooseYear.value=true
}
const ConfirmremoveallChooseYear= ()=>{
  let prems ={year:getAllyear(ChooseYear.value)}
  deleteByDate(prems).then((res)=>{
      console.log(res);
      ElMessage({
    message: '删除成功',
    type: 'success',
    plain: true,
  })
  DeletenoticeChooseYear.value=false
  onsubmint()
  })
}
const querydeta=(row)=>{
  console.log(childRef);
  
  childRef.value.openModal(row)
console.log(row,"点击当前行");
}
const removeallClick=()=>{
  Deletenotice.value=true
}
const ConfirmremoveallClick=()=>{
  deleteAll().then((res)=>{
    console.log(res);
    ElMessage({
    message: '删除成功',
    type: 'success',
    plain: true,
  })
  Deletenotice.value=false
  onsubmint()
  })
}
const onsubmint = async () => {
  dataLoading.value = true
  let pre = {
    workCode: formInline.workCode,
    incomingNum: formInline.incomingNum,
    businessType: formInline.businessType,
    appealTimeStart:getYMD(formInline.appealTime[0]) ,
    appealTimeEnd: getYMD(formInline.appealTime[1]) ,
    page: page.value,
    size: size.value

  }
  const result = await getAll(pre)
  tableData.value = result.list
  total.value = result.total
  dataLoading.value = false
}
onsubmint()
const createlabelClick = async () => {
  if (!Selection.value) {
    ElMessage({
      message: '请选择要生成的标签',
      type: 'warning',
      plain: true,
    })
  } else {
    tableLoading.value = true;
    const result = await updateWorkTag(Selection.value)
    if (result) {
      ElMessage({
        message: '标签生成成功',
        type: 'success',
        plain: true,
      })
    }
    tableLoading.value = false;
    onsubmint()
  }
}
const createsummaryClick = async () => {
  if (!Selection.value) {
    ElMessage({
      message: '请选择要生成的摘要',
      type: 'warning',
      plain: true,
    })
  } else {
    tableLoading.value = true;
    const result = await updateSummary(Selection.value)
    if (result) {
      ElMessage({
        message: '摘要生成成功',
        type: 'success',
        plain: true,
      })
    }
    tableLoading.value = false;
    onsubmint()
  }
}
const handleSelectionChange = (row) => {
  Selection.value = row
console.log(Selection);
  // console.log(row);
}
const onImportExcelClick = () => {
  UploadExcelDialogShow.value = true
}
 
// const beforeUploadHandle = (file) => {
//   utils.showLoadding('正在上传...')
//   return true
// }

//导入按钮loading
const beforeUploadHandle = (file) => {
    importLoading.value = true // 开启按钮 loading
    return true
}

const handleSuccess = async (res) => {
  if (res.content === 0||res.content === null) {
    utils.showSuccess('上传数据成功')
  } else {
    utils.showError('有' + res.content + '数据失败')
  }
  UploadExcelDialogShow.value = false
  importLoading.value = false
  // utils.hideLoadding()
  onsubmint()
}

/**
 * size 改变触发
 */
const handleSizeChange = currentSize => {
  size.value = currentSize
  onsubmint()
}

/**
 * 页码改变触发
 */
const handleCurrentChange = currentPage => {
  page.value = currentPage
  onsubmint()
}

</script>

<style lang="scss" scoped >
.demo-form-inline {
  display: flex;
  flex-wrap: nowrap;
  .form-item{
    // min-width: 200px;
      flex-grow: 1;
    // flex-basis: 0;
  }
}

/* 响应式布局 */
// @media (min-width: 640px) {
//   .demo-form-inline .w-full {
//     width: 50%;
//   }
// }

@media (min-width: 768px) {
  .demo-form-inline .form-item {
    width: 33.333%;
  }
}

@media (min-width: 1024px) {
  .demo-form-inline .form-item {
    width: 25%;
  }
 
}

.search-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  overflow-x: auto;
  margin-bottom: -16px;
}

.right-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>